<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <script src="jquery.js"></script>
    <script src="layer/layer.js"></script>
    <title>layer</title>
    <style>
        .catch {
            display: none;
        }
    </style>
</head>
<!--网站：http://layer.layui.com/-->
<body>
    <button class="test1">点击弹出</button>
    <button class="test2">第三方扩展皮肤</button>
    <button class="test3">询问层</button>
    <button class="test5">墨绿深蓝风</button>
    <button class="test6">捕获页</button>
    <button class="test7">prompt层</button>
    <button class="test8">自定层</button>
    <button class="test9">tab层</button>
    <button class="test10">iframe层</button>
    <div class="catch">
        <h1>以及标题</h1>
        <h2>二级标题</h2>
        <h3>三级标题</h3>
    </div>
</body>

</html>
<script>
    $(function () {
        $(".test1").on("click", function () {
            layer.open({
                type: 6,
                area: ['600px', '300px'],
                shadeClose: true,
                content: '<div style="padding:20px;">自定义内容</div>'
            })
        });

        // test2
        // layer.alert("内容")
        // 第三方扩展皮肤
        $(".test2").on("click", function () {
            layer.alert("内容", {
                icon: 1,
                skin: 'layer-ext-moom'
            })
        });
        // 询问层
        $(".test3").on("click", function () {
            layer.confirm("你是如何看待前端开发的？", {
                bth: ['重要', '奇葩']
            }, function () {
                layer.msg('的确很重要', {
                    icon: 1
                })
            }, function () {
                layer.msg('也可以这样', {
                    time: 20000,
                    btn: ['明白了', '知道了']
                })
            })
        });

        // 墨绿深蓝风
        $(".test5").on("click", function () {
            layer.alert('墨绿风格，点击确认看深蓝', {
                skin: 'layui-layer-molv',
                closeBth: 0
            }, function () {
                layer.alert('偶吧深蓝style', {
                    skin: 'layui-layer-lan',
                    closeBtn: 0,
                    anim: 4 //动画类型
                });
            })
        });
        // 捕获页
        $(".test6").on("click", function () {
            layer.open({
                type: 1,
                shade: false,
                title: false, //不显示标题
                content: $('.catch'), //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
                cancel: function () {
                    layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', {
                        time: 5000,
                        icon: 6
                    });
                }
            });
        });





        // prompt
        $(".test7").on("click", function () {
            layer.prompt({
                title: '输入任何口令，并确认',
                formType: 1
            }, function (pass, index) {
                layer.close(index);
                layer.prompt({
                    title: '随便写点啥，并确认',
                    formType: 2
                }, function (text, index) {
                    layer.close(index);
                    layer.msg('演示完毕！您的口令：' + pass +
                        ' 您最后写下了： ' + text);
                });
            });
        });









        // 自定层
        $(".test8").on("click", function () {
            layer.open({
                type: 1,
                skin: 'layui-layer-demo', //样式类名
                closeBtn: 0, //不显示关闭按钮
                anim: 2,
                shadeClose: true, //开启遮罩关闭
                content: '自定义',
                area: ['420px', '200px']
            });
        });






        // tab层
        $(".test9").on("click", function () {
            layer.tab({
                area: ['600px', '300px'],
                tab: [{
                    title: 'TAB1',
                    content: '内容1'
                }, {
                    title: 'TAB2',
                    content: '内容2'
                }, {
                    title: 'TAB3',
                    content: '内容3'
                }]
            });
        });












        // iframe层
        $(".test10").on("click", function () {
            layer.open({
                type: 2,
                title: 'layer mobile页',
                shadeClose: true,
                shade: 0.8,
                area: ['380px', '90%'],
                content: 'http://lol.qq.com/' //iframe的url
            });
        });


    })
</script>
<!-- http://layer.layui.com/ -->